<template>
  <div class="w-full h-full flex justify-center items-center">
    <h1>移动端使用</h1>
    <div
      class="border border-dark-50/5 bg-light-900 absolute rounded-md flex justify-center items-center text-xs shadow"
      :class="{ animation: isAnimating }"
      @touchstart="handleTouchStart"
      @touchmove.prevent="handleTouchMove"
      @touchcancel="handleTouchCancel"
      @touchend="handleTouchEnd"
      :style="moveStyle"
    >
      {{ Math.ceil(left) }}
      {{ Math.ceil(top) }}
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Card',
};
</script>

<script setup lang="ts">
import { useDrag } from '@/hooks/index';

const CARD_WIDTH = 120;
const CARD_HEIGHT = 120;

const {
  left,
  top,
  handleTouchStart,
  handleTouchMove,
  handleTouchCancel,
  handleTouchEnd,
  isAnimating,
} = useDrag();

console.log('startLeft :>> ', left.value);
console.log('startTop :>> ', top.value);

const moveStyle = computed(() => {
  return {
    left: left.value + 'px',
    top: top.value + 'px',
    width: CARD_WIDTH + 'px',
    height: CARD_HEIGHT + 'px',
  };
});
</script>

<style scoped>
.animation {
  transition: opacity 0.4s ease-out, left 0.4s ease-out, top 0.4s ease-out,
    width 0.4s ease-out, height 0.4s ease-out;
}
</style>
